 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box1{
			width: 400px;
			height: 400px;
			background-color: blue;
		}
		.box2{
			width: 1200px;
			height: 1200px;
			background-image: url("img/1.jpeg");
			/*background-repeat: repeat-x;/*设置往哪个方向平铺repeat-y no-repeat就是不平铺*/
			background-repeat: no-repeat;
			background-size: 1200px 1200px;
			background-size: 100% 100%;
			background-size: cover;/*保证图片不变形，且充满屏幕，其他多余的地方就裁掉了*/
			background-size: contain;
			
		}
	</style>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>